import * as React from 'react';
import * as Immutable from 'seamless-immutable';
import { getParamFromHash, paramToHash } from '../../config/workViews';

export interface IStackViewPros {
    stackView: StackView;
}

export interface IStackViewItem {
    name: string; // 页面名称
    component: any; // 组件
    path?: string; // 页面路径
    paramPath?: string; // 页面参数路径
    data?: any; // 路由数据
    callback?: any; // 回调typeof == 'function'
}

interface IProps {
    isActive: boolean;
    rootView: IStackViewItem[];
}

interface IState {
    views: IStackViewItem[];
}

/** 一个简单的栈式路由，用于标签页内页面之间的跳转。 */
export default class StackView extends React.Component<IProps, IState> {
    private stack: boolean = false;
    constructor(props: IProps) {
        super(props);
        const { rootView } = this.props;
        this.state = {
            views: rootView
        };
    }

    componentWillReceiveProps(nextProps: IProps, nextContext: any): void {
        const { rootView } = nextProps;
        const { views } = this.state;
        if (rootView.length !== views.length) {
            this.setState({
                views: rootView
            });
        }
    }

    pushView = (view: IStackViewItem) => {
        const { views } = this.state;
        this.setState({
            views: views.concat(view)
        });
        this.stack = true;
    }

    popView = () => {
        const { views } = this.state;
        // 至少要保留一个rootView
        if (views.length > 1) {
            this.setState({
                views: views.slice(0, views.length - 1)
            });
        }
        this.stack = true;
    }

    replaceView = (view: IStackViewItem) => {
        const { views } = this.state;
        // 至少要保留一个rootView
        if (views.length > 1) {
            views[views.length - 1] = view;
            this.setState({
                views: views
            });
        }
        this.stack = true;
    }

    getViews = (endComponent?: typeof React.Component): IStackViewItem[] => {
        const { views } = this.state;
        let ret: IStackViewItem[] = views;
        if (endComponent) {
            views.map((view, index) => {
                if (view.component === endComponent) {
                    ret = views.slice(0, index + 1);
                }
            });
        }
        return ret;
    }

    clickViewItem = (index: number) => {
        const { views } = this.state;
        // 至少要保留一个rootView
        if (views.length > 1 && index < views.length - 1) {
            this.setState({
                views: views.slice(0, index + 1)
            });
            this.stack = true;
        }
    }

    render() {
        const { views } = this.state;
        return (
            <div style={{ height: '100%' }}>
                {views.map((view: IStackViewItem, index: number, array: IStackViewItem[]) => {
                    const isActive: boolean = index === array.length - 1;
                    // 只显示栈顶的页面
                    const style = {
                        display: isActive ? 'block' : 'none',
                        height: '100%'
                    };
                    if (isActive) {
                        const hash = paramToHash(view.paramPath, view.data);
                        if (this.stack) {
                            // stack opt
                            if (location.hash !== hash) {
                                location.hash = hash;
                            }
                            this.stack = false;
                        } else {
                            // 显示操作stack路由
                            // console.log("显示操作stack路由........")
                        }
                    }
                    return (
                        <div style={style} key={view.name}>
                            <view.component
                                callback={view.callback}
                                data={view.data}
                                names={views.map(v => v.name)}
                                index={index}
                                stackView={this}
                            />
                        </div>
                    );
                })}
            </div>
        );
    }
}


export const toStackViewItem = function (path: string, view: any, ext: any = {}): IStackViewItem {
    const viewItem: IStackViewItem = Immutable.from(Object.assign({
        name: view.text,
        path: view.path,
        paramPath: view.paramPath,
        component: view.component,
        data: getParamFromHash(path, view.paramPath)
    }, ext));
    return viewItem;
};

export const initStackViews = function (pages: Array<any>, rootView: any): IStackViewItem[] {
    const path = location.hash;
    const views: IStackViewItem[] = [];
    // push root view
    views.push(toStackViewItem(path, rootView));
    pages.map(view => {
        if (view.pathRegExp.test(path)) {
            const viewItem: IStackViewItem = toStackViewItem(path, view);
            views.push(viewItem);
        }
    });
    return views;
};

export const renderViewByHash = function (pages: Array<any>, path: string, ext: any = {}): IStackViewItem {
    let stackViewItem: IStackViewItem;
    pages.map(view => {
        if (view.pathRegExp.test(path)) {
            stackViewItem = toStackViewItem(path, view, ext);
            return false;
        }
    });
    return stackViewItem;
};
